<template>
	<div class="bg">
		<Header></Header>
		<div class="banner_bg">
			<img class="" src="https://image.utea88.com/statics/pc_cooperation_banner.png" alt="">
		</div>
		<div class="wrapper_bg">
			<div class="content_bg" @click="goToWeChat">
				<div class="img_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_icon_1.png" alt="">
				</div>
				<div class="title">成为产业合伙人</div>
				<div class="desc">{{ desc1 }}</div>
				<div class="arrow_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_arrow.png" alt="">
				</div>
				<div class="click">CLICK UP</div>
			</div>
			<div class="content_bg" @click="toAgreement">
				<div class="img_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_icon_2.png" alt="">
				</div>
				<div class="title">成为供应商/采购商</div>
				<div class="desc">{{ desc2 }}</div>
				<div class="arrow_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_arrow.png" alt="">
				</div>
				<div class="click">CLICK UP</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from "@/views/front/components/Header";
	import Footer from "@/views/front/components/Footer";

	export default {
		components: {
			Header,
			Footer,
		},
		data() {
			return {
				desc1: "众茶国际的100%投资自建仓\n或控股的共建仓",
				desc2: "签约客户，非加盟仓、其产品\n库存数据在众茶国际云仓中心同步",
			}
		},
		methods: {
			toAgreement() {
				this.$router.push({
					name: "frontAgreement"
				});
			},
			goToWeChat() {
				window.open('https://mp.weixin.qq.com/s/X4tAcCQADL2M1i6FZQjNFQ',"_blank")
			}
  	},
	}
</script>

<style lang="scss">
	.bg {
		background: rgb(244, 247, 250);
	}

	.banner_bg {
		position: relative;
		width: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }

	.wrapper_bg {
		margin: 50px 0;
		display: flex;
		justify-content: center;

		.content_bg {
			margin-left: 65px;
			width: 390px;
			height: 500px;
			background: white;
			cursor: pointer;

			&:nth-child(1) {
				margin-left: 0;
			}

			.img_bg {
				margin-top: 42px;
				display: flex;
				justify-content: center;
			}

			.title {
				margin-top: 41px;
				width: 100%;
				height: 42px;
				opacity: 1;
				/** 文本1 */
				font-size: 32px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 42px;
				color: rgba(14, 131, 192, 1);
				text-align: center;
			}

			.desc {
				margin-top: 15px;
				width: 100%;
				opacity: 0.9;
				/** 文本1 */
				font-size: 20px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20px;
				color: rgba(153, 153, 153, 1);
				text-align: center;
				white-space: pre-wrap;
			}

			.arrow_bg {
				margin-top: 42px;
				display: flex;
				justify-content: center;
			}

			.click {
				margin-top: 16px;
				width: 100%;
				height: 20px;
				opacity: 0.9;
				/** 文本1 */
				font-size: 20px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20px;
				color: rgba(204, 204, 204, 1);
				text-align: center;
				vertical-align: middle;

			}
		}
	}
</style>
